<template>
  <div class="main">
    <TopNav :title="(route.meta.title as string)"></TopNav>
    <div v-if="show">
      <div class="goods_group">
        <SwipeCell v-for="item in list" :key="item.cartItemId">
          <div class="goods_item">
            <div class="goods_checked">
              <Checkbox v-model="item.checked" icon-size="18px" />
            </div>
            <div class="goods_img">
              <img :width="imgH" :src="item.goodsCoverImg" alt="" />
            </div>
            <div class="goods_desc">
              <p class="goods_title">
                <span>{{ item.goodsName }}</span>
                <span>x{{ item.goodsCount }}</span>
              </p>
              <div class="goods_btn">
                <p>￥{{ item.sellingPrice }}</p>
                <Stepper :name="item.cartItemId" v-model="item.goodsCount" @change="changeNumber"></Stepper>
              </div>
            </div>
          </div>
          <template #right>
            <Button square text="删除" type="danger" class="delete-button" style="height: 100%"
              @click="removeGoods(item.cartItemId)" />
          </template>
        </SwipeCell>
      </div>
      <div class="nothing"></div>
      <footer>
        <SubmitBar :price="allPrice" button-text="提交订单" @submit="goDingDan">
          <Checkbox v-model="checkAll">全选</Checkbox>
        </SubmitBar>
      </footer>
    </div>
    <div v-if="show2" class="cartNoGoods">
      <Icon name="smile-o" size="1.5rem" />
      <p style="fontSize:.5rem">购物车空空如也</p>
      <Button type="primary" style="width:5rem;left: -.7rem; margin-top: .2rem;" color="rgb(27,174,174)"
        @click="$router.push('/Home')"> 前往首页 </Button>
    </div>
    <div>
    </div>
  </div>
</template>
  
<script  setup lang="ts">
import { useRoute,useRouter } from "vue-router";
import { http } from "@/apis/user";
import TopNav from "@/components/topNav.vue";
import { useStore } from '../../store/test-store'
import { Stepper, Button, Icon, SwipeCell, SubmitBar, Checkbox } from 'vant'
interface list{
  cartItemId:number,
  checked:boolean,
  goodsCoverImg:string,
  goodsName:string,
  goodsCount:number,
  sellingPrice:number
}
const store = useStore()
store.changeCartListAsync()//获取商品列表并存储在piniazhong
const route = useRoute()
const router = useRouter()
let show = ref(true)
let show2 = ref(false)
let imgH = 85
let list= computed(()=>store.cartList)//获取商品列表
watch(list, (va) => { //侦听购物车商品列表
  if (va.length < 1) {
    show2.value = true
    show.value = false
  } else {
    show.value = true
    show2.value = false
  }
})
let allPrice = computed(() => //总价
 list.value.reduce((prev, cur) => {
   return   prev + (cur.checked ? cur.goodsCount * cur.sellingPrice * 100 : 0)
  }, 0)
)
let checkAll=computed({
      get() {
        return list.value.every((item) => item.checked);
      },
      set(val) {
        list.value.forEach((item) => {
          item.checked = val;
        });
      },
    })
//提交商品订单
function onSubmit() {
}
//删除商品
function removeGoods<T>(id: T) {
  http.deleteCartList(id).then(() => {
    store.changeCartListAsync()
  })
}
//商品数量改变
function changeNumber<T>(value: number, detail: { name: string }) {
  http.changeGoodsNumber({
    cartItemId: detail.name,
    goodsCount: value,
  }).then((data) => {
    console.log(data);
  })
}
function goDingDan() {
  if (list.value.some((item) => item.checked)) {
    let a = [];
    for (let i = 0;i < list.value.filter((item) => item.checked).length;i++) {
      a.push(list.value.filter((item) => item.checked)[i].cartItemId);
    }
    localStorage.setItem("cartItemIds", a);
    router.push("/createOrder");
  } else {
 console.log("你没有选择任何商品");
  }
}
</script>
  
  
<style scoped lang="less">
body {
  height: 100%;
  position: relative;
}

.main {
  width: 100%;
  top: 0;
  bottom: 0px;
  margin: 1.6rem auto 0;

  .goods_group {
    padding-left: 0.26667rem;
    margin-bottom: 5rem;

    .goods_item {
      display: flex;
      align-items: center;

      .goods_desc {
        width: 100%;
        padding: 0.53333rem;
        font-size: 0.16rem;

        .goods_title {
          display: flex;
          justify-content: space-between;
        }

        .goods_btn {
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }

  .cartNoGoods {
    width: 6rem;
    height: 6rem;
    position: absolute;
    margin: 0 auto;
    top: 6rem;
    left: 3rem;

    .Icon {
      left: 1rem;
    }
  }
}

.SubmitBar {
  bottom: 48px;
}

.nothing {
  height: 0.01rem;
}
</style>